<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-descriptions ant-pro-descriptions"
    >
      <div
        class="ant-descriptions-header"
      >
        <div
          class="ant-descriptions-title"
        >
          高级定义列表request columns
        </div>
        <div
          class="ant-descriptions-extra"
        >
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            链路
          </a>
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            报警
          </a>
          <a
            rel="noopener noreferrer"
            target="_blank"
          >
            查看
          </a>
        </div>
      </div>
      <div
        class="ant-descriptions-view"
      >
        <table>
          <tbody>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    文本
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    空
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    时间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    2020-08-09
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    状态
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span
                      class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                    >
                      <span
                        class="ant-badge-status-dot ant-badge-status-default"
                      />
                      <span
                        class="ant-badge-status-text"
                      >
                        全部
                      </span>
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    money
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      ¥1,212,100.00
                    </span>
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    状态2
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    open
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    时间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    2020-08-09
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    时间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    09.08.2020
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    开关
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    打开
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    money
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      ¥1,212,100.00
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    money无符号
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      1,212,100.00
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    money负数无符号
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      -12,345.33
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    百分比
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      100.00%
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <div>
                      多余的dom
                    </div>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    超链接
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <a
                      href="alipay.com"
                    >
                      超链接
                    </a>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        ProDescriptions Columns 配置 Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 描述列表标题
        </li>
        <li>
          <strong>
            request
          </strong>
          : 异步请求函数，返回数据
        </li>
        <li>
          <strong>
            emptyText
          </strong>
          : 空数据时显示的文本
        </li>
        <li>
          <strong>
            columns
          </strong>
          : 列配置数组，定义每列的属性
        </li>
      </ul>
      <h4>
        Column 配置项：
      </h4>
      <ul>
        <li>
          <strong>
            title
          </strong>
          : 列标题
        </li>
        <li>
          <strong>
            key
          </strong>
          : 列的唯一标识
        </li>
        <li>
          <strong>
            dataIndex
          </strong>
          : 数据字段名
        </li>
        <li>
          <strong>
            valueType
          </strong>
          : 值类型，决定如何渲染
        </li>
        <li>
          <strong>
            valueEnum
          </strong>
          : 枚举值配置
        </li>
        <li>
          <strong>
            fieldProps
          </strong>
          : 字段属性配置
        </li>
        <li>
          <strong>
            render
          </strong>
          : 自定义渲染函数
        </li>
      </ul>
      <h4>
        ValueType 类型：
      </h4>
      <ul>
        <li>
          <strong>
            select
          </strong>
          : 选择框，配合 valueEnum 使用
        </li>
        <li>
          <strong>
            date
          </strong>
          : 日期格式
        </li>
        <li>
          <strong>
            switch
          </strong>
          : 开关组件
        </li>
        <li>
          <strong>
            money
          </strong>
          : 金额格式
        </li>
        <li>
          <strong>
            option
          </strong>
          : 操作按钮
        </li>
        <li>
          <strong>
            percent
          </strong>
          : 百分比格式
        </li>
      </ul>
      <h4>
        FieldProps 字段属性：
      </h4>
      <ul>
        <li>
          <strong>
            format
          </strong>
          : 日期格式化字符串，如 'DD.MM.YYYY'
        </li>
        <li>
          <strong>
            moneySymbol
          </strong>
          : 货币符号，可以是字符串或 false
        </li>
        <li>
          <strong>
            自定义属性
          </strong>
          : 根据 valueType 传递相应属性
        </li>
      </ul>
      <h4>
        ValueEnum 枚举配置：
      </h4>
      <ul>
        <li>
          <strong>
            text
          </strong>
          : 显示的文本
        </li>
        <li>
          <strong>
            status
          </strong>
          : 状态类型，影响显示样式
        </li>
        <li>
          <strong>
            支持状态
          </strong>
          : Default, Error, Success, Processing
        </li>
      </ul>
      <h4>
        Render 自定义渲染：
      </h4>
      <ul>
        <li>
          <strong>
            函数返回
          </strong>
          : 返回 React 节点数组
        </li>
        <li>
          <strong>
            操作按钮
          </strong>
          : 常用于渲染操作链接或按钮
        </li>
        <li>
          <strong>
            样式控制
          </strong>
          : 完全控制渲染内容的样式
        </li>
      </ul>
      <h4>
        混合使用特点：
      </h4>
      <ul>
        <li>
          <strong>
            Columns 配置
          </strong>
          : 通过 columns 数组定义列
        </li>
        <li>
          <strong>
            Item 组件
          </strong>
          : 同时支持 ProDescriptions.Item
        </li>
        <li>
          <strong>
            优先级
          </strong>
          : Item 组件会覆盖 columns 中的配置
        </li>
      </ul>
      <h4>
        使用场景：
      </h4>
      <ul>
        <li>
          <strong>
            动态列
          </strong>
          : 根据数据动态生成列配置
        </li>
        <li>
          <strong>
            复杂展示
          </strong>
          : 展示各种类型的数据
        </li>
        <li>
          <strong>
            操作列
          </strong>
          : 添加操作按钮或链接
        </li>
        <li>
          <strong>
            格式化显示
          </strong>
          : 自定义数据格式化方式
        </li>
      </ul>
      <h4>
        最佳实践：
      </h4>
      <ul>
        <li>
          <strong>
            列配置
          </strong>
          : 使用 columns 配置批量定义列
        </li>
        <li>
          <strong>
            字段属性
          </strong>
          : 通过 fieldProps 传递组件属性
        </li>
        <li>
          <strong>
            自定义渲染
          </strong>
          : 使用 render 函数实现复杂渲染
        </li>
        <li>
          <strong>
            类型匹配
          </strong>
          : 选择合适的 valueType 展示数据
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>